<template>
	<view class="set_sex_box">
		<view class="icon icon_boy" @click="chooseSex(SexEnum.BOY)">
			<MyIcons size="30px" :src="joinSystemPath(iconFileNameByBoy)"/>
			男
		</view>
		<view class="icon icon_girl" @click="chooseSex(SexEnum.GIRL)">
			<MyIcons size="30px" :src="joinSystemPath(iconFileNameByGirl)"/>
			女
		</view>
	</view>
</template>

<script setup>
	import { ref , watch,onMounted} from "vue"
	
	import MyIcons from '@/components/MyIcons/MyIcons.vue'
	
	import {userStore} from '@/stores/user'
	import {dynamicStyleStore} from '@/stores/dynamicStyle.js'
	
	import {UserModel} from '@/service/model/user.js'
	
	import {SexEnum} from '@/enum/GlobalEnum.js'
	
	import {
		joinSystemPath
	} from '@/utils/imgJoinName.js'
	
	
	const props=defineProps({
		clickSubmitSexFlag:{
			type:Number
		}
	})
	
	watch(()=>props.clickSubmitSexFlag,()=>{
		submitSex()
	})
	
	const user_store = userStore()
	const dynamicStyle_store = dynamicStyleStore()
	const userModel = new UserModel()
	
	const {
		primary_cool_color,
		primary_hot_color,
	} = dynamicStyle_store.globalStyle
	
	const sex = ref(user_store.userInfo.sex)
	
	const iconFileNameByBoy = ref('setSexBoyUnChecked.png')
	const iconFileNameByGirl = ref('setSexGirlUnChecked.png ')
	
	const iconBoyBgc = ref(primary_cool_color)
	const iconGirlBgc = ref(primary_hot_color)
	const unCheckedBgc = 'rgba(0,0,0,0)'
	const checkedText = '#ffff'
	const textBoyColor = ref(primary_cool_color)
	const textGirlColor = ref(primary_hot_color)
	
	const init=()=>{
		chooseSex(sex.value)
	}
	
	//选择性别
	const chooseSex=(type)=>{
		if(type===SexEnum.BOY){
			iconGirlBgc.value = unCheckedBgc
			iconBoyBgc.value = primary_cool_color
			iconFileNameByBoy.value = 'setSexBoyChecked.png'
			iconFileNameByGirl.value = 'setSexGirlUnChecked.png'
			textBoyColor.value = checkedText
			textGirlColor.value = primary_hot_color
		}else{
			iconBoyBgc.value = unCheckedBgc
			iconGirlBgc.value = primary_hot_color
			iconFileNameByBoy.value = 'setSexBoyUnChecked.png'
			iconFileNameByGirl.value = 'setSexGirlChecked.png'
			textBoyColor.value = primary_cool_color
			textGirlColor.value = checkedText
		}
		
		sex.value = type
	}
	
	//提交修改性别
	const submitSex=async()=>{
		const {
			user_name,
			nick_name,
			phone,
			id,
			user_avatar
		} = user_store.userInfo
		
		const {data,success} = await userModel.postUpdateUserInfo({
			user_name,
			phone:'15888888888',
			nick_name,
			sex:sex.value,
			user_avatar
		},id)
		
		if(success){
			user_store.userInfo.sex = sex.value
			uni.$emit('tips',data,'success')
		}
	}
	
	onMounted(()=>{
		init()
	})
</script>

<style lang="less">
	.set_sex_box{
		display: flex;
		justify-content: space-around;
		.icon{
			width: 140rpx;
			height: 140rpx;
			border-radius:50%;
			flex-shrink:0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 0 20rpx;
			transition: all .5s ease;
		}
		.icon_boy{
			background-color: v-bind(iconBoyBgc);
			color:v-bind(textBoyColor);
		}
		.icon_girl{
			background-color: v-bind(iconGirlBgc);
			color:v-bind(textGirlColor);
		}
	}
</style>